// 定义搜索条件
var whereData={cate_id:0,title:''}

layui.use(['table', 'layer'], function () {
    var table = layui.table;
    var layer = layui.layer;
    // 页面加载完成就渲染表格
    renderTable()

    function renderTable() {
        // 创建渲染实例
        table.render({
            elem: '#cate-table',
            url: '/newsApi', // 数据接口地址
            // 搜索条件
            where: whereData,
            toolbar: '#toolbarDemo',
            defaultToolbar: ['exports', 'print'],
            //height: 'full-200', // 最大高度减去其他容器已占有的高度差
            cellMinWidth: 80,
            page: true, //开启分页功能
            limit: 3, // 每页显示的条数
            limits: [3, 6, 9], // 下拉选项
            escape:true,
            // 表格头部的设置
            cols: [
                [{
                        type: 'checkbox',
                        fixed: 'left'
                    }, {
                        type: 'numbers',
                        fixed: 'left',
                        width: 80,
                        sort: true
                    }, {
                        field: 'title',
                        width: 150,
                        title: '新闻标题'
                    }, {
                        field: 'Cate',
                        title: '所属分类',
                        width: 130,
                        templet:function(d){
                           return d.Cate.cate_name
                        }
                    }, {
                        field: 'img_url',
                        title: '新闻图片',
                        width: 90,
                        // 方式一：定义模板引擎：会和art-template发生冲突
                        //templet:'#picTpl'
                        // 方式二：定义回调函数:可以解决，但是需要提前获取该列的值，适合做数据的处理
                        templet:function(d){
                            let img = d.img_url
                            return '<img src="'+img+'" alt="">'
                        }
                        // 方式三：直接输出html代码
                        //templet: '<div><img src="{{=d.img_url}}" alt=""></div>'
                    }, {
                        field: 'author',
                        title: '添加人',
                        width: 90,
                    },
                    {
                        field: 'add_time',
                        title: '添加时间',
                        width: 220,
                        templet: function (d) {
                            return moment(d.add_time).format('YYYY-MM-DD HH::mm:ss')
                        }
                    },
                    {
                        field: 'view_nums',
                        title: '访问量',
                        width: 120,
                    },
                    {
                        fixed: 'right',
                        title: '操作',
                        width: 155,
                        minWidth: 150,
                        toolbar: '#op'
                    }
                ]
            ],
            error: function (res, msg) {
                console.log(res, msg)
            }
        });
    }
    // 操作：删除、修改
    table.on('tool(test)', function (obj) { // 双击 toolDouble
        var data = obj.data;
        const id = data.id
        if (obj.event === 'del') {
            layer.confirm('您确定要删除吗?', async function (index) {
                // 发送ajax请求进行数据的删除
                const {
                    data: res
                } = await axios.delete('/cates/' + id)
                if (res.status !== 200) {
                    return layer.msg('删除失败', {
                        icon: 5,
                        time: 2000
                    })
                }
                return layer.msg('删除成功', {
                    icon: 6,
                    time: 1000
                }, function () {
                    // 进行页面删除
                    obj.del();
                    // 关闭层
                    layer.close(index);
                })
            });
        } else if (obj.event === 'edit') {
            layer.open({
                title: '编辑分类',
                type: 2,
                area: ['500px', '300px'],
                content: ['/cate?id=' + id, 'no'],
                end: function () {
                    // 重新渲染表格
                    renderTable()
                }
            });
        }
    });

    // 定义id集合
    var ids = new Set()
    //触发表格复选框选择---可以实现批量删除
    table.on('checkbox(test)', function (obj) {
        if (obj.checked === true) {
            ids.add(obj.data.id)
        } else {
            ids.delete(obj.data.id)
        }
        // 把集合转化为数组
        const ids_arr = [...ids]
        console.log(ids_arr);
    });

    // 单元格编辑事件---实现分类排序的即点即改功能
    table.on('edit(test)', async function (obj) {
        var field = obj.field, //得到字段
            value = obj.value, //得到修改后的
            id = obj.data.id; //得到所在行所有键值
        // 获取数据修改前的值
        const cate = await axios.get('/cates/getCateById?id=' + id)
        const old_sort = cate.data.data.sort
        // 定义空对象    
        var update = {};
        var reg = /^[1-9]\d?$/
        if (!reg.test(value)) {
            return layer.msg('排序数字必须是1-99的数字', {
                icon: 5,
                time: 2000
            }, function () {
                update[field] = old_sort;
                obj.update(update);
            })
        }

        // 发送ajax请求实现分类的修改 
        const {
            data: res
        } = await axios.post('/cates/editSort/' + id, {
            sort: value
        })
        if (res.status === 200) {
            layer.msg('修改成功', {
                icon: 6,
                time: 1000
            }, function () {
                update[field] = value;
                obj.update(update);
            })
        } else {
            return layer.msg('修改失败', {
                icon: 5,
                time: 2000
            }, function () {
                update[field] = old_sort;
                obj.update(update);
            })
        }

    });

    // 点击添加按钮实现跳转
    $('.news-add').click(function () {
           location.href ='/news/add'
    })
    // 点击搜索按钮，更改搜索数据
    $('.btn-search').click(function () {
        // 获取分类数据
        let cate_id=$('.cate').val()
        // 获取标题数据
        let title=$('.title').val().trim()
        // 更改搜索条件
        whereData.cate_id=cate_id
        whereData.title=title
        // 重新渲染数据
        renderTable()
    })


    // 结束
});